<template>
    <div>
        <h1>商家列表</h1>
        <div style="display: flex;flex-wrap: wrap;gap: 2rem;">
            <el-card style="width: 30%;" shadow="hover" v-for="i in list" :key="i._id" class="vendor-list"
                @click="showDetail(i, $event)">
                <div style="text-align: center;">
                    <h3>{{ i.name }}</h3>
                    <span style="font-size: 0.8rem; color: gray;">{{ i.description }}</span>
                </div>
            </el-card>
        </div>
    </div>
    <edialog v-model="show" @close="handleClose" :show-close="true" :draggable="true">
        <template #title>
            <h2 style="text-align: center;">{{ detail.name }}</h2>
            <p style="text-align: center;">{{ detail.description }}</p>
        </template>
        <template #default>
            <p>
                <span v-for="(i, index) in detail.type" :key="index" style="margin-right: 0.5rem;">
                    {{ i }}
                </span>
            </p>
            <div>造型师：
                <div v-for="(i, index) in stylist" :key="index" style="display: inline-block;margin-right: 1rem;">
                    <div @mouseenter="onMouseEnter(i)"
                        style="display:flex;flex-direction: column;align-items: center;justify-content: center;">
                        <el-avatar :size="50" :src="i.photoUrl"></el-avatar>
                        <span style="margin-left: 0.5rem;">{{ i.name }}</span>
                    </div>

                </div>
            </div>
            <p>地址：{{ detail.address }}</p>
            <p>联系电话：{{ detail.phone }}</p>
            <p>营业时间：{{ detail.openingHours[0] }}-{{ detail.openingHours[1] }}</p>
        </template>
        <template #footer>
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </template>
    </edialog>
    <edialog2 v-model="show2" @close="show2 = false" :show-close="true" :draggable="true" :modal="false" :top="'17vh'"
        :width="'40%'">
        <template #title>
            <h3 style="text-align: center;">{{ userInfo.name }}简介</h3>
        </template>
        <template #default>
            <div style="display: flex;justify-content: space-evenly;">
                <img :src="userInfo.photoUrl" alt="理发师照片"
                    style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 10px;">
                <div>
                    <p>年龄：{{ userInfo.age }}</p>
                    <p>标签：{{ userInfo.bio }}</p>
                    <span>特长：</span><span v-for="i in userInfo.specialties" :key="i" style="margin-right: 0.5rem;">{{ i }}</span>
                    <p>联系电话：{{ userInfo.phone }}</p>
                </div>
            </div>
        </template>
        <template #footer>
        </template>
    </edialog2>
</template>

<script setup>
import { get, post } from '@/util/request';
import { computed, onMounted, ref, nextTick } from 'vue';
import { useCounterStore } from '../stores/counter';
import edialog from '@/component/dialog.vue';
import edialog2 from '@/component/dialog.vue';
const show = ref(false)
const detail = ref({});//店铺详情

const store = useCounterStore();
const list = ref([]);//店铺列表
const stylist = ref([])//发型师列表
const getList = async () => {
    const res = await get('/shopfront/getsalon');
    list.value = res.data.data;
};
const getStyList = async () => {
    const res = await get('/shopfront/getstylist');
    for (let i = 0; i < res.data.data.length; i++) {
        if (res.data.data[i].salonId._id == detail.value._id) {
            stylist.value.push(res.data.data[i])
        }
    }
};


const showDetail = (item, event) => {
    show.value = true
    detail.value = item
    console.log(detail.value._id, '1133');
    getStyList()
};

const handleClose = () => {
    show.value = false
    stylist.value = []
};
const handleConfirm=()=>{
    show.value = false
    stylist.value = []
}

// 理发师详情
const show2 = ref(false)
const userInfo = ref({})//理发师详情
const onMouseEnter = (i) => {
    show2.value = true
    userInfo.value = i
}

// 在组件加载时获取数据
onMounted(() => {
    getList();
});
</script>

<style scoped></style>